<template>
  <div class="" v-loading="loading">
    <el-container class="detail-container-with">
      <div style="margin:10px 0 0 0">
        <div class="attract-title">景点详情</div>
        <div class="attract-title2">ENJOY SCENIC VIEWS</div>
<!--        <hr class="custom-hr">-->
        <el-card style="margin-top: -15px;">
          <div class="detail-content-container">
            <div class="goods-info clearfix">
              <div class="gallery-list">
                <e-xiangqingxinxi :images="map.photo"></e-xiangqingxinxi>
              </div>
              <div class="goods-right-content">
                <h3 class="content-title">
                  <span class="content-name">{{ map.name }}</span>
                  <e-favorite v-model="isFavorite" module="attraction" column="name"
                              :id="map.id"></e-favorite>
<!--                  <e-collect v-model="isCollect" module="jingdianxinxi" ziduan="jingdianmingcheng" :id="map.id"></e-collect>-->
                </h3>
                <div class="content-details">
                  <div class="detail-item">
                    <i class="el-icon-location detail-icon"></i>
                    <span class="detail-label">地址：</span>
                    <span class="detail-value">{{ map.address }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-time detail-icon"></i>
                    <span class="detail-label">开放时间：</span>
                    <span class="detail-value">{{ map.startTime }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-food detail-icon"></i>
                    <span class="detail-label">附近美食：</span>
                    <span class="detail-value">{{ map.food }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-view detail-icon"></i>
                    <span class="detail-value">{{ map.clicks }}</span>
                    <span class="detail-value1">￥{{ map.price }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-content" v-html="map.introduction"></div>
          </div>
        </el-card>
      </div>
    </el-container>
  </div>
</template>

<style type="text/scss" scoped lang="scss">
.detail-content-container {
  position: relative;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-top: 30px;
  ::v-deep img{
    width: 100%;
    height: 100%;
  }

}

.detail-container-with {
  margin-left: 100px;
  margin-right: 100px;
}

.content-title {
  font-size: 28px;
  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  margin-top: -10px;

  .content-name {
    margin-left: 34px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
  }
}

.content-details {
  font-family: 'Arial, sans-serif';
  margin: 0px 20px;
  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;

    .detail-icon {
      font-size: 20px;
      margin-right: 10px;
      color: #81b3c7;
    }

    .detail-label {
      font-size: 16px;
      font-weight: 500;
      color: #666666;
      width: 120px;
    }

    .detail-value {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .detail-value1{
      font-size: 18px;
      font-weight: 400;
      color: #f87a7a;
      margin-left: 92px;
    }
  }
}
.goods-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .gallery-list {
    flex-shrink: 0;
    margin-left: 5%;
    margin-right: -10px;
    width: 499px;
    height: 283px;
    margin-bottom: 67px;
    z-index: 1;

    ::v-deep .el-carousel__container {
      position: relative;
      height: 335px;
    }
  }

  .goods-right-content {
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
    margin-left: -157px;
    height: 335px;
    width: 559px;
    margin-top: -16px;
    z-index: 2;

    .custom-hr {
      margin-top: -20px;
      margin-bottom: -24px;
      border: 0;
      border-top: 1px solid #b1aaaa;
      width: 100%;
    }
    ::v-deep .el-button.is-circle {
      background: #81b3c7;
      border: 1px solid #81b3c7;
      margin-left: 15px;
    }

  }
}

.goods-content {
  margin-top: 15px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: 'Arial, sans-serif';
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  text-indent: 2em; /* 首行缩进两个字符 */
}

.attract-title {
  text-align: center;
  font-size: 25px;
  width: 100%;
}

.attract-title2 {
  margin-bottom: 3%;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}
</style>

<script>
import api from '@/api';
import { extend } from '@/utils/extend';
export default {
  data() {
    return {
      loading: false,   // 加载
      isFavorite: false, // 是否已经收藏
      map: {
        number: '',
        name: '',
        region: '',
        photo: '',
        startTime: '',
        food: '',
        address: '',
        price: '',
        clicks: '',
        introduction: '',
        addtime: '',
      },
    }
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  watch: {
    id: {
      handler() {
        this.loadDetail();
      },
      immediate: true
    },
  },
  computed: {
  },
  methods: {
    loadDetail() {
      if (this.loading) return;
      this.loading = true;
      this.$get(api.attraction.webdetail, {
        id: this.id
      }).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },
    handleNavigate(id) {
    }
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>

<!--<template>-->
<!--  <div class="" v-loading="loading">-->
<!--    <el-container class="detail-container-with">-->
<!--      <div style="margin:10px 0 0 0">-->
<!--        <div class="attract-title">景点详情</div>-->
<!--        <div class="attract-title2">ENJOY SCENIC VIEWS</div>-->
<!--        <hr class="custom-hr">-->
<!--        <el-card>-->
<!--          <div class="detail-content-container">-->
<!--          <div class="goods-info clearfix">-->
<!--            <div class="gallery-list">-->
<!--              <e-xiangqingxinxi :images="map.tupian"></e-xiangqingxinxi>-->
<!--            </div>-->
<!--            <div class="goods-right-content">-->
<!--              <h3 class="content-title">-->
<!--                <span class="content-name">{{ map.jingdianmingcheng }}</span>-->
<!--                <e-collect v-model="isCollect" module="jingdianxinxi" ziduan="jingdianmingcheng" :id="map.id"></e-collect>-->
<!--              </h3>-->
<!--              <div class="content-details">-->
<!--                <div class="detail-item">-->
<!--                  <span class="detail-label">所属地区：</span>-->
<!--                  <span class="detail-value">-->
<!--                    <e-select-view module="diqu" :value="map.suoshudiqu" select="id" show="diqumingcheng"></e-select-view>-->
<!--                  </span>-->
<!--                </div>-->
<!--                <div class="detail-item">-->
<!--                  <span class="detail-label">地址：</span>-->
<!--                  <span class="detail-value">{{ map.dizhi }}</span>-->
<!--                </div>-->
<!--                <div class="detail-item">-->
<!--                  <span class="detail-label">开放时间：</span>-->
<!--                  <span class="detail-value">{{ map.kaifangshijian }}</span>-->
<!--                </div>-->
<!--                <div class="detail-item">-->
<!--                  <span class="detail-label">附近美食：</span>-->
<!--                  <span class="detail-value">{{ map.fujinmeishi }}</span>-->
<!--                </div>-->
<!--                <div class="detail-item">-->
<!--                  <span class="detail-label">票价：</span>-->
<!--                  <span class="detail-value">{{ map.piaojia }}</span>-->
<!--                </div>-->
<!--                <div class="detail-item">-->
<!--                  <span class="detail-label">浏览量：</span>-->
<!--                  <span class="detail-value">{{ map.liulanliang }}</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        </div>-->
<!--        </el-card>-->
<!--        <div class="goods-content" v-html="map.miaoshu">-->
<!--          </div>-->
<!--      </div>-->
<!--    </el-container>-->
<!--  </div>-->
<!--</template>-->
<!--<style type="text/scss" scoped lang="scss">-->
<!--.detail-content-container {-->
<!--  position: relative;-->
<!--  line-height: 1.8;-->
<!--  letter-spacing: 0.1em;-->
<!--  margin-top: 30px;-->
<!--}-->

<!--.detail-container-with {-->
<!--  margin-left: 100px;-->
<!--  margin-right: 100px;-->
<!--}-->


<!--.content-title {-->
<!--  font-size: 28px;-->
<!--  font-weight: 600;-->
<!--  color: #333333;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 15px;-->

<!--  .content-name {-->
<!--    margin-left: 189px;-->
<!--    text-align: center;-->
<!--    font-size: 28px;-->
<!--    font-weight: 700;-->
<!--  }-->
<!--}-->

<!--.content-details {-->
<!--  margin: 0px 76px;-->
<!--  .detail-item {-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    margin-bottom: 10px;-->

<!--    .detail-label {-->
<!--      text-align: center;-->
<!--      font-size: 16px;-->
<!--      font-weight: 500;-->
<!--      color: #666666;-->
<!--      width: 120px;-->
<!--    }-->

<!--    .detail-value {-->
<!--      font-size: 16px;-->
<!--      font-weight: 400;-->
<!--      color: #333333;-->
<!--    }-->
<!--  }-->
<!--}-->



<!--.goods-info {-->
<!--  margin: -77px 19%;-->
<!--  .gallery-list {-->
<!--    width: 100%;-->
<!--    max-width: 400px;-->
<!--    height: auto;-->
<!--    margin: 120px auto;-->

<!--    .e-xiangqingxinxi {-->
<!--      width: 100%;-->
<!--      height: auto;-->
<!--      object-fit: contain;-->
<!--      transform: scale(1.2);-->
<!--      transition: transform 0.3s ease;-->
<!--    }-->

<!--    .gallery-top {-->
<!--      height: 80% !important;-->
<!--      width: 100%;-->
<!--    }-->

<!--    .gallery-thumbs {-->
<!--      height: 20% !important;-->
<!--      box-sizing: border-box;-->
<!--      padding: 10px 0;-->

<!--      .swiper-slide {-->
<!--        width: 25%;-->
<!--        height: 100%;-->
<!--        opacity: 0.4;-->
<!--      }-->
<!--    }-->

<!--    .gallery-thumbs .swiper-slide-thumb-active {-->
<!--      opacity: 1;-->
<!--    }-->
<!--  }-->

<!--  .goods-right-content {-->
<!--    position: absolute;-->
<!--    left: 165px;-->
<!--    top: 87px;-->
<!--    margin-right: 10px;-->
<!--    background-color: white;-->
<!--    padding: 10px;-->
<!--    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);-->
<!--    width: calc(100% - 732px);-->
<!--    height: 351px;-->

<!--    .custom-hr {-->
<!--      margin-top: -20px;-->
<!--      margin-bottom: -24px;-->
<!--      border: 0;-->
<!--      border-top: 1px solid #b1aaaa;-->
<!--      width: 82%;-->
<!--    }-->

<!--    ::v-deep .el-button.is-circle {-->
<!--      background: #81b3c7;-->
<!--      border: 1px solid #81b3c7;-->
<!--      margin-left: 15px;-->
<!--    }-->

<!--  }-->
<!--}-->

<!--.goods-content {-->
<!--  margin-top: 15px;-->
<!--}-->
<!--.attract-title {-->
<!--  text-align: center;-->
<!--  font-size: 25px;-->
<!--  width: 100%;-->
<!--}-->
<!--.attract-title2 {-->
<!--  margin-bottom: 3%;-->
<!--  color: #8c8c8c;-->
<!--  text-align: center;-->
<!--  font-size: 17px;-->
<!--  width: 100%;-->
<!--}-->
<!--</style>-->
<!--<script>-->
<!--import api from '@/api';-->
<!--import { extend } from '@/utils/extend';-->
<!--export default {-->
<!--  data() {-->
<!--      return {-->
<!--          loading: false,   // 加载-->
<!--          isCollect: false, // 是否已经收藏-->
<!--          map: {-->
<!--              jingdianbianhao: '',-->
<!--              jingdianmingcheng: '',-->
<!--              suoshudiqu: '',-->
<!--              tupian: '',-->
<!--              kaifangshijian: '',-->
<!--              fujinmeishi: '',-->
<!--              dizhi: '',-->
<!--              piaojia: '',-->
<!--              liulanliang: '',-->
<!--              miaoshu: '',-->
<!--              addtime: '',-->
<!--          },-->
<!--      }-->
<!--  },-->
<!--  props: {-->
<!--      id: {-->
<!--          type: [String, Number],-->
<!--          required: true-->
<!--      }-->
<!--  },-->
<!--  watch: {-->
<!--      id: {-->
<!--          handler() {-->
<!--              this.loadDetail();-->
<!--          },-->
<!--          immediate: true-->
<!--      },-->
<!--  },-->
<!--  computed: {-->
<!--  },-->
<!--  methods: {-->
<!--      loadDetail() {-->
<!--          if (this.loading) return;-->
<!--          this.loading = true;-->
<!--          this.$get(api.jingdianxinxi.webdetail, {-->
<!--              id: this.id-->
<!--          }).then(res => {-->
<!--              this.loading = false;-->
<!--              if (res.code == api.code.OK) {-->
<!--                  extend(this, res.data);-->
<!--              } else {-->
<!--                  this.$message.error(res.msg);-->
<!--              }-->
<!--          }).catch(err => {-->
<!--              this.loading = false;-->
<!--              this.$message.error(err.message);-->
<!--          });-->
<!--      },-->

<!--  },-->
<!--  created() {-->
<!--  },-->
<!--  mounted() {-->
<!--  },-->
<!--  destroyed() {-->
<!--  }-->
<!--}-->
<!--</script>-->

